Component({
    externalClasses: ['i-class'],
    properties: {
        height: {
            type: String,
            value: '300'
        },
        itemHeight: {
            type: Number,
            value: 18
        },
        
    },
    relations: {
        '../index-item/index': {
            type: 'child',
            linked() {
                this._updateDataChange();
            },
            linkChanged() {
                this._updateDataChange();
            },
            unlinked() {
                this._updateDataChange();
            }
        }
    },
    data: {
        scrollTop: 0,
        fixedData: [],
        current: 0,
        timer: null,
        startTop: 0,
        itemLength: 0,
        currentName: '',
        isTouches: false
    },
    methods: {
        loop() { },
        _updateDataChange() {
            const indexItems = this.getRelationNodes('../index-item/index');
            const len = indexItems.length;
            const fixedData = this.data.fixedData;
            /*
             * 使用函数节流限制重复去设置数组内容进而限制多次重复渲染
             * 暂时没有研究微信在渲染的时候是否会进行函数节流
            */
            if (len > 0) {

                if (this.data.timer) {
                    clearTimeout(this.data.timer)
                    this.setData({
                        timer: null
                    })
                }

                this.data.timer = setTimeout(() => {
                    const data = [];
                    indexItems.forEach((item) => {
                        if (item.data.name && fixedData.indexOf(item.data.name) === -1) {
                            data.push(item.data.name);
                            item.updateDataChange();
                        }
                    })
                    this.setData({
                        fixedData: data,
                        itemLength: indexItems.length
                    })
                    //组件加载完成之后重新设置顶部高度
                    this.setTouchStartVal();
                }, 0);
                this.setData({
                    timer: this.data.timer
                })

            }
        },
        handlerScroll(event) {
            const detail = event.detail;
            const scrollTop = detail.scrollTop;
            const indexItems = this.getRelationNodes('../index-item/index');
            indexItems.forEach((item, index) => {
                let data = item.data;
                let offset = data.top + data.height;
                if (scrollTop < offset && scrollTop >= data.top) {
                    this.setData({
                        current: index,
                        currentName: data.currentName
                    })
                }
            })
        },
        getCurrentItem(index) {
            const indexItems = this.getRelationNodes('../index-item/index');
            let result = {};
            result = indexItems[index].data;
            result.total = indexItems.length;
            return result;
        },
        triggerCallback(options) {
            this.triggerEvent('change', options)
        },
        handlerFixedTap(event) {
            const eindex = event.currentTarget.dataset.index;
            const item = this.getCurrentItem(eindex);
            this.setData({
                scrollTop: item.top,
                currentName: item.currentName,
                isTouches: true
            })
            this.triggerCallback({
                index: eindex,
                current: item.currentName
            })
        },
        handlerTouchMove(event) {
            const data = this.data;
            const touches = event.touches[0] || {};
            const pageY = touches.pageY;
            const rest = pageY - data.startTop;
            let index = Math.ceil(rest / data.itemHeight);
            index = index >= data.itemLength ? data.itemLength - 1 : index;
            const movePosition = this.getCurrentItem(index);

            /*
             * 当touch选中的元素和当前currentName不相等的时候才震动一下
             * 微信震动事件
            */
            if (movePosition.name !== this.data.currentName) {
                wx.vibrateShort();
            }

            this.setData({
                scrollTop: movePosition.top,
                currentName: movePosition.name,
                isTouches: true
            })

            this.triggerCallback({
                index: index,
                current: movePosition.name
            })
        },
        handlerTouchEnd() {
            this.setData({
                isTouches: false
            })
        },
        setTouchStartVal() {
            const className = '.i-index-fixed';
            const query = wx.createSelectorQuery().in(this);
            query.select(className).boundingClientRect((res) => {
                this.setData({
                    startTop: res.top
                })
            }).exec()
        }
    }
})
